import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { WithStyles } from "@material-ui/core/styles/withStyles";
import { Col, Row } from "antd";
import * as React from "react";
import { getDocs, getHos, getInfo, getNews } from "../../axios/Request";
import image from "../../images/banner-left.png";
import docImage from "../../images/doctor_bg.png";
import HosImage from "../../images/hospital1.jpg";
import DoctorList from "./DoctorList";
import HealthNews from "./HealthNews";
import HospitalList from "./HospitalList";
import InfoPublic from "./InfoPublic";
import Axios from "axios";

const styles = (theme: Theme) =>
  createStyles({
    root: {},
    firstLine: {
      display: "flex",
      alignItems: "middle",
      justifyContent: "space-between",
      margin: "10px 0"
    }
  });

interface Iprops extends WithStyles<typeof styles> {
  // imgUrl:string
}

interface Istate {
  data: any;
  dataInfo: any;
  dataHos: any;
  dataDocs: any;
}

class Home extends React.Component<Iprops, Istate> {
  // state初始化
  constructor(props: Iprops) {
    super(props);
    this.state = {
      data: [],
      dataInfo: [],
      dataHos: [],
      dataDocs: []
    };
  }

  public componentDidMount(): void {
    Axios.all([
      getNews({ size: 6 }),
      getInfo({ size: 6 }),
      getHos({ size: 6 }),
      getDocs({ size: 6 })
    ]).then(
      Axios.spread((res1, res2, res3, res4) => {
        this.setState({
          data: res1.data._embedded.news,
          dataInfo: res2.data._embedded.news,
          dataHos: res3.data._embedded.portalHospitals,
          dataDocs: res4.data._embedded.portalDoctors
        });
      })
    );
  }

  public render() {
    const { classes } = this.props;
    return (
      <div>
        <img
          src={require("../../images/banner_main.png")}
          style={{ width: "100%", height: "35vh", minHeight: "255px" }}
          alt="这里是横幅"
        />
        <Row type={"flex"} justify={"center"}>
          <Col span={20} style={{ minHeight: "75vh" }}>
            {/*健康咨询和信息公开*/}
            <Row className={classes.firstLine} gutter={12}>
              <Col span={14}>
                <HealthNews image={image} data={this.state.data} />
              </Col>
              <Col span={10}>
                <InfoPublic data={this.state.dataInfo} />
              </Col>
            </Row>
            {/*医院列表*/}
            <HospitalList images={HosImage} data={this.state.dataHos} />
            {/*医生列表*/}
            <DoctorList doctorImg={docImage} data={this.state.dataDocs} />
          </Col>
        </Row>
      </div>
    );
  }
}

export default withStyles(styles)(Home);
